
<template>
    <div class="membershipInterests">
        <div class="m_title">会员权益</div>
        <div class="m_box">
            <div class="m_item">
                <img class="m_img" src="@/assets/images/card.jpg" alt="">
                <div class="m_shade"><span class="iconfont iconsuo64"></span>待解锁</div>
            </div>
            <div class="m_item">
                <img class="m_img" src="@/assets/images/card.jpg" alt="">
                <div class="m_shade"><span class="iconfont iconsuo64"></span>待解锁</div>
            </div>
            <div class="m_item">
                <img class="m_img" src="@/assets/images/card.jpg" alt="">
                <div class="m_shade"><span class="iconfont iconsuo64"></span>待解锁</div>
            </div>
            <div class="m_item">
                <img class="m_img" src="@/assets/images/card.jpg" alt="">
                <div class="m_shade"><span class="iconfont iconsuo64"></span>待解锁</div>
            </div>
        </div>
    </div>
</template>

<script>
// 会员权益
export default {
    name: 'MembershipInterests',
    components:{
        
    },
    data () {
        return {
            
        }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    .membershipInterests{
        padding: 30px 0px;
        .m_title{
            color: #ccb484;
            font-size: 28px;
            line-height: 76px;
            border-bottom: 1px solid #727171;
            padding: 0px 20px;
        }
        .m_box{
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            padding: 30px 0px;
            .m_item{
                width: 345px; 
                height: 300px;
                padding: 20px 0px;
                position: relative;
                .m_img{
                    width: 345px;
                    height: 260px;
                    // width: 100%;
                    overflow: hidden;
                    border-radius: 10px;
                    position: absolute;
                    top:0px;
                    left: 0px;
                }
                .m_shade{
                    position: absolute;
                    top:0px;
                    left: 0px;
                    width: 345px;
                    height: 260px;
                    background: rgba(167, 164, 164, 0.6);
                    border-radius: 10px;
                    margin: auto;
                    line-height: 260px;
                    color: #fff;
                    text-align: center;
                    font-size: 29px;
                }
            }
        }
    }
</style>
